<template>
	<a-breadcrumb class="titile">
		<a-breadcrumb-item>百度——OCR识别——上传图片</a-breadcrumb-item>
	</a-breadcrumb>
	<a-layout-content style="margin: 0 16px">
		<div class="content">
			<a-row>
				<a-col class="uploadImg" :span="24">
					<a-upload-dragger v-model:fileList="fileList" name="file" accept="image/png,image/jpeg"
						:customRequest="uploadHandle" @change="handleChange" :beforeUpload="beforeUpload" :maxCount="1">
						<p class="ant-upload-drag-icon">
							<inbox-outlined></inbox-outlined>
						</p>
						<p class="ant-upload-text">单击或拖动文件到此区域以上传</p>
						<p class="ant-upload-hint">
							单个文件上传,仅支持jpg,png格式
						</p>
					</a-upload-dragger>
					<a-divider type="horizontal" class="divider" />
					<a-col :span="24">
						<div class="resultDiv">
							返回结果
						</div>
						<a-textarea v-model:value="ocrValue" style="width: 100vw;
		height: 35vh;overflow: scroll;overflow-x: hidden;resize: none;" placeholder="识别后文本" />
					</a-col>
				</a-col>
			</a-row>
		</div>
	</a-layout-content>
</template>
<script lang="ts">
import {
	InboxOutlined
} from '@ant-design/icons-vue';
import {
	message
} from 'ant-design-vue';
import {
	defineComponent,
	ref
} from 'vue';
import type {
	UploadChangeParam
} from 'ant-design-vue';
import {
	ocrToText
} from '../../../api/baiduapi.js'
export default defineComponent({
	name: 'ocr',
	components: {
		InboxOutlined,
	},
	setup() {
		const uploadHandle = (e) => {
			const formData = new FormData()
			fileList.value.forEach((file) => {
				file.status = "done";
				formData.append("file", file.originFileObj);
			})
			ocrToText(formData).then(res => {
				if (res.code === 200) {
					ocrValue.value = res.data;
				}
			})
		};
		const handleChange = (info: UploadChangeParam) => {
			const status = info.file.status;
			if (status !== 'uploading') {
				console.log(info.file, info.fileList);
			}
			if (status === 'done') {
				message.success(`${info.file.name}上传成功`);
			} else if (status === 'error') {
				message.error(`${info.file.name}上传失败`);
			}
		};
		const beforeUpload: UploadProps['beforeUpload'] = file => {
			const type = file.type
			if (type === 'image/png' || type === 'image/jpeg') {
				return true;
			}
			message.error(`文件格式错误,请重新上传`);
			return false;
		};
		const fileList = ref<[]>([]);
		const ocrValue = ref<string>('');
		return {
			uploadHandle,
			ocrValue,
			beforeUpload,
			handleChange,
			fileList
		};
	},
});
</script>
<style>
.titile {
	width: 80vw;
	height: 6vh;
	line-height: 6vh;
	padding-left: 1.5%;
	text-align: left;
}

.content {
	width: 85vw;
	height: 78vh;
	background-color: white;
	overflow: hidden;
}

.divider {
	width: 100vw;
	background-color: #f2eaf2;
	overflow: hidden;
}

.uploadImg {
	margin: 0 auto;
	height: 25vh;
}

.resultDiv {
	width: 100vw;
	height: 5vh;
	line-height: 5vh;
	text-align: left;
	padding-left: 0.1%;
}
</style>
